import React from 'react';
import { Button, Col, Form, Input, Row,  Space} from 'dw-mx';
import DWCardReader from 'dw-mx-dwncs-dwcardreader'
const layout = {
    labelCol: {
        span: 8
    },
    wrapperCol: {
        span: 16
    }
};

export default function CardReaderdemo() {
    const [form] = Form.useForm();

    const onClick = () => {
        DWCardReader.DWGetSSCardInfo().then(data => {
            form.setFieldsValue({
                "scard":data
            })
        })
    }

    const SetReaderList = () => {
        const  readerList = form.getFieldsValue().list
        DWCardReader.DWSetReaderList(readerList).then(() => {
            return DWCardReader.DWGetReaderList();
        })
    }

    return (
        <div>
            <Form form={form} {...layout} layout={'horizontal'} initialValues={{"list":"SS728M05"}}>
                <Row>
                    <Col span={8}>
                        <Form.Item label='读写器标识列表' name='list' >
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Row justify={'end'}>
                            <Space>
                                <Button onClick={SetReaderList}>设置读写器列表</Button>
                            </Space>
                        </Row>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Form.Item label='社保卡信息' name='scard' >
                            <Input.TextArea readOnly={true} autoSize={true}/>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Row justify={'end'}>
                            <Space>
                                <Button onClick={onClick}>读社保卡信息</Button>
                            </Space>
                        </Row>
                    </Col>
                </Row>
            </Form>
        </div>
    );
}
